<template>
    <div class="shouye">
        <!-- <p>这是首页内容</p> -->

        <ul>
            <li v-for="item in students" :key="item.id">
                <!-- <router-link :to="{ path: '/shouye/itemdetail', query: { id: item.id } }">
                    <img :src="item.img" alt="" srcset="" />
                    <p>{{ item.name }}</p>
                </router-link> -->
                <router-link :to="{ name: 'itemdetail', query: { id: item.id } }">
                    <img :src="item.img" alt="" srcset="" />
                    <p>{{ item.name }}</p>
                </router-link>
            </li>
        </ul>
        <button @click="$router.forward()">回到上个页面</button>
        <button @click="$router.back()">返回上个页面</button>
        <!-- <router-view></router-view> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            students: [
                {
                    id: "01",
                    name: "王洋洋",
                    //   img: require("../assets/img/yangyang.jpg"),
                    img: require('../assets/img/yangyang.jpg'),
                },
                {
                    id: "02",
                    name: "刘超超",
                    img: require("../assets/img/chaochao.jpg"),
                },
                {
                    id: "03",
                    name: "刘佳宁",
                    img: require("../assets/img/jianing.jpg"),
                },
            ],
        }
    }
}
</script>

<style lang="scss" scoped>
.shouye {
    //height: 100%;
    margin-bottom: 100px;

    ul {
        list-style: none;


        li {
            img {
                width: 200px;
                height: 200px;
                background-size: 100% 100%;
            }
        }
    }
}
</style>